<template>
<el-dialog  :title="title" :width="width"
              :visible.sync="isShowVisible"
              center :close-on-click-modal="false"
              :before-close="() => this.close(false)">

      <el-form label-width="120px" :model="maPackData" ref="maPackData" :rules="rules" v-loading="isLoading">

        <el-tabs v-model="activeName">

        <el-tab-pane name="base"> <span slot="label"><i class="el-icon-date"></i> 基本资料</span>
    <el-card>
        <el-row>
          <el-col :span="6">
            <el-form-item label="区域:" prop="xAddress" >
                <el-input v-model="maPackData.xAddress" :disabled="isview"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="根节点id:" prop="fname" >
                <el-input v-model="maPackData.fGroupId" :disabled="isview" ></el-input>
            </el-form-item>
          </el-col>

      <el-col :span="6">
            <el-form-item label="数量:" prop="xCount"  >
                <el-input v-model="maPackData.xCount" :disabled="isview"></el-input>
            </el-form-item>
      </el-col>

<el-col :span="6">
            <el-form-item label="部门id:" prop="dpId" id='dpId'>
                <el-input v-model="maPackData.dpId" :disabled="isview"></el-input>
            </el-form-item>
</el-col>

          <!-- <el-col :span="6">
            <el-form-item label="当前状态:" prop="xDescription" v-if="false">
                <tie-enum v-if="!isLoading" v-model="maPackData.xDescription" :status="status" default="启用"
                          className="cn.hxlc.tie.demo.core.enums.StatusEnum" ></tie-enum>
              </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>

          <el-col :span="6">
            <el-form-item label="角色名称:"  >
                <el-input v-model="maPackData.xName" :disabled="isview"></el-input>
            </el-form-item>
          </el-col>

<el-col :span="8">
            <el-form-item label="编号:" prop="xNumber"  >
              <el-input v-model="maPackData.xNumber" disabled></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>

        <el-col :span="24">

        <el-form-item label="备注:">

          <el-input type="textarea" v-model="maPackData.xBeizhu" :disabled="isview"></el-input>

        </el-form-item>

      </el-col>

    </el-row>

        <el-row>

          <el-col :span="9">

          <el-form-item label="测试日期" prop="xDate" size="mini" >

          <el-date-picker
      v-model="maPackData.xDate"
      type="datetime"
      placeholder="选择日期"
      :disabled="isview">
    </el-date-picker>

          </el-form-item>

          </el-col>

          <el-col :span="10">

              <el-form-item label=" 测试性别" prop="xSex"  >

<el-radio v-model="maPackData.xSex" label="男" value="1" :disabled="isview" >男</el-radio>
<el-radio v-model="maPackData.xSex" label="女" value="2" :disabled="isview">女</el-radio>

              </el-form-item>

          </el-col>

        </el-row>

        <el-divider content-position="left">具体信息</el-divider>

        <el-row>

            <div style="margin-bottom:10px" v-if="!isview">

              <el-button type="primary"  plain size="small" @click="insertField(-1)" >新增</el-button>
              <el-button type="danger"   plain size="small" @click="$refs.xTable1.removeCheckboxRow()" >删除</el-button>

            </div>

        </el-row>

      <el-row>

<vxe-table border
                show-overflow
                highlight-hover-row
                stripe
                resizable
                ref="xTable1"
                class="my_table_insert"
                max-height="300"
                :data="maPackData.entry"
                :auto-resize="true"
                :edit-rules="dpRules"
                :edit-config="dpConfig">
              <vxe-table-column type="checkbox" width="60"></vxe-table-column>
              <vxe-table-column field="dpId" title="部门编号"  :edit-render="{type: 'default'}">
                  <template v-slot:edit="subscope">
                    <inputSelect v-model="subscope.row.dpId" :f7Param="dpMaterialF7Param" 
                    :loadShow="subscope.row.dpId" 
                    title="部门信息表"
                    @onF7DaTaSelected="onF7DpMaterialSelectChanged"></inputSelect>
                    </template>
                    <template v-slot="{ row }"> 
                    {{row.dpId}}
                    </template>

              </vxe-table-column>
              <vxe-table-column field="dpName" title="部门名称" ></vxe-table-column>
              <vxe-table-column field="dpFunction" title="部门职责" ></vxe-table-column>
              <vxe-table-column field="dpNumber" title="部门人数"></vxe-table-column>
              <vxe-table-column field="funitid" title="计量单位"  :edit-render="{name: '$select', options : unitList}"></vxe-table-column>
</vxe-table>

      </el-row>

        </el-card>

        </el-tab-pane>

        <el-tab-pane name="setting">

          <span slot="label"><i class="el-icon-setting"></i>创建人信息</span>

<el-card>

<el-row>

<el-col :span="8">

    <el-form-item label="创建人身份:">

            <el-input v-model="maPackData.creatRole" disabled></el-input>

    </el-form-item>

</el-col>
    <el-col :span="8">

            <el-form-item label="创建人id:" prop="creatId" >

<inputSelect v-if="!isLoading" :f7Disable="isview" v-model="maPackData.creatId" :loadShow="maPackData.creatId" :f7Param="entryMaterialF7Param" title="创建人信息" @onF7DaTaSelected="onF7entryMaterialSelected" ></inputSelect>

            </el-form-item>

    </el-col>

<el-col :span="8">
      <el-form-item label="创建人姓名:" >
            <el-input v-model="maPackData.creatName" disabled></el-input>
      </el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="8">
      <el-form-item label="被创建时间:" >
      <el-input v-model="maPackData.creatTime" disabled></el-input>
      </el-form-item>
</el-col>

    <el-col :span="8">
      <el-form-item label="被修改时间:" >
                <el-input v-model="maPackData.updateTime" disabled></el-input>
      </el-form-item>
    </el-col>

  </el-row>
  </el-card>
        </el-tab-pane>

        </el-tabs> 

      </el-form>

    <div slot="footer" class="dialog-footer" v-if="!isview">
      <el-button type="primary" @click="saveMaPackData">保存</el-button>
      <el-button @click="close(false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import xuTest1 from "@/api/customer/xuTest1"
import UnitApi from '@/api/basedata/UnitApi'
  export default {
    name: 'maPack_addEdit',
    props:{
      width : {type : String ,default : '70vw'},
      xId : {type : Number,},
      status : {type : String,},
    },
    data(){
      return{
        dpMaterialF7Param:{
                  selectId:'dpId',
                  selectUrl:'/tie-demo/xuTest1/queryDp',
                  selectShow:{spt:'',field:['dpId']},
                  column:[
                          {lable:'部门编号',prop:'dpId',isFilter:false,filterField:'dpId'},
                          {lable:'部门名称',prop:'dpName',isFilter:false,filterField:'dpName'},
                          {lable:'部门职能',prop:'dpFunction',isFilter:false,filterField:'dpFunction'},
                          {lable:'部门人数',prop:'dpNumber',isFilter:false,filterField:'dpNumber'},
                    ],
                  defaultFilter:[{field:'fstatus',value:"USED"}]
        },
        tableLoading: false,
        dataList: [],
        unitList : [],
        activeName: 'base',
        title:'新增物料包装',
        isShowVisible:true,
        isview : false,
        rules:{
        // xCount:[{type:'number',required: true, message: '请填写数量', tirgger: 'blur'}],
        dpId:[{required: true, message: '请填写部门编号', tirgger: 'blur' }],
        creatId:[{type: 'number',required: true, message: '请选择创建人编号', tirgger: 'change'}]
        },
        dpRules: {

        },
        dpConfig:{trigger: 'click', mode: 'cell'},
        yesOrNoList:[{value:false,label:"否"},{value:true,label:"是"}],

        entryMaterialF7Param: {
          selectId:'creatId',
          selectUrl:'/tie-demo/xuTest1/queryCreat',
          selectShow:{spt:'',field:['creatId']},
          column:[
                  {lable:'创建人编号',prop:'creatId',isFilter:true,filterField:'creatName'},
                  {lable:'创建人名称',prop:'creatName',isFilter:true,filterField:'creatName'},
                  {lable:'创建人身份',prop:'creatRole',isFilter:false,filterField:'creatRole'},
            ],
          defaultFilter:[{field:'fstatus',value:"USED"}]
        },
        isLoading : false,
        fnumberAnable: true,
        maPackData : {xSex:'男'},
        xuTest1 : new xuTest1(),
        unitApi : new UnitApi()
      }
    },

async created(){
      this.isLoading = true
      if(this.status == 'add'){

      }else{
          if(this.status == 'edit'){
              this.title = "编辑物料包装"
          }else if(this.status == 'view'){
              this.title = "查看物料包装";
              this.isview = true;
              this.rules = {};
              this.dpConfig = {};
              this.dpRules={};
          }
          let maPackData = await this.xuTest1.detail({xId:this.xId})

          this.maPackData = maPackData.data;

      }
      this.getUnitList();
      await this.$NumRuleUtil.getNumber(this, "cn.hxlc.tie.demo.modular.xjf.testEquipment.model.Result.xuTestResult", null, 'maPackData', 'xNumberAnable', 'xNumber');
      this.isLoading = false
    },

    methods:{
      async insertField(row){
        let { row: newRow } = await this.$refs.xTable1.insertAt({}, row)
        await this.$refs.xTable1.setActiveCell(newRow, 'fieldName')
      },

getUnitList(){
        this.unitApi.queryList().then(res => {
          let unitList = res.data;
          this.unitList = [];
          for (var i=0;i < unitList.length;i++) {
            this.unitList.push({
                value: unitList[i].fid,
                label: unitList[i].fname,
            })
          }
        })
      },

onF7DpMaterialSelectChanged(row){
      if(row!=null&&row!=undefined){
          this.$refs.xTable1.getActiveRecord().row.dpId = row.dpId;
          this.$refs.xTable1.getActiveRecord().row.dpName = row.dpName;
          this.$refs.xTable1.getActiveRecord().row.dpFunction = row.dpFunction;
          this.$refs.xTable1.getActiveRecord().row.dpNumber = row.dpNumber;
        }else{
          this.$refs.xTable1.getActiveRecord().row.dpId = null;
          this.$refs.xTable1.getActiveRecord().row.dpName = null;
          this.$refs.xTable1.getActiveRecord().row.dpFunction = null;

        }
      },

      onF7entryMaterialSelected(row){
          this.maPackData.creatRole = row.creatRole;
          this.maPackData.creatName = row.creatName;
      },
      async saveMaPackData(){
        const errMap = await this.$refs.xTable1.validate(true).catch(errMap => errMap)
        if (errMap) {
          return;
        }
        this.$refs['maPackData'].validate((valid, object) => {
          if(valid){

            let entrys = this.$refs.xTable1.getTableData().tableData;
            console.log(entrys)
            if(entrys.length == 0){
              this.$tie.showError('','分录不能为空！');
              return;

              }
const loading = this.$loading({
              lock: true,
              text: '请耐心等待.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })

          let maPackData = this.maPackData

          maPackData.entry = entrys;

      if(this.status == 'edit'){
        maPackData.xDescription = 1;
                this.xuTest1.update(maPackData).then(res => {
                    loading.close()
                    this.$tie.showSuccess(res.message)
                    this.close(true)
                }).catch(e => {
                    loading.close()
                })
            }
            else if(this.status=='add'){
              maPackData.xDescription = 0
              this.xuTest1.add(maPackData).then(res => {
                    loading.close()
                    this.$tie.showSuccess(res.message)
                    this.close(true)
                }).catch(e => {
                    loading.close()
                })
            }
        }
      })

      },
      close(isOk){
        this.$emit('close',isOk)
      }
    },
  }
</script>
<style lang="scss">
.vxe-select--panel {
  z-index: 3001 !important;
}

.col--actived{
  height: 125px !important;

  .vxe-cell{
    height: 90%;

    textarea{
      height: 100%;
    }
  }
}
</style>
